<template>
  <div class="leftchild6">
    <header>
      <li>
        <router-link to="/"><span>工作台</span></router-link>
      </li>
      &nbsp;
      <li>/</li>
      &nbsp;
      <li>
        <router-link to="/leftchild_4"><span>所有文章</span></router-link>
      </li>
      &nbsp;
      <li>/</li>
      &nbsp;
      <li>标签管理</li>
    </header>
    <main>
      <div class="left">
        <div class="top">{{ state.flag ? '管理标签' : '添加标签' }}</div>
        <div class="l-main">
          <a-form
            ref="formRef"
            :model="formState"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-item label="" name="name">
              <a-input
                v-model:value="formState.name"
                placeholder="输入标签名称"
              />
            </a-form-item>
            <a-form-item label="" name="names">
              <a-input
                v-model:value="formState.names"
                placeholder="输入标签值（请输入英文,作为路由使用）"
              />
            </a-form-item>
          </a-form>
        </div>
        <div class="l-footer">
          <div>
            <a-button type="primary" @click="onSubmit" v-if="!state.flag"
              >保存</a-button
            >
            <a-button type="primary" v-if="state.flag">更改</a-button>
            <a-button type="dashed" v-if="state.flag" @click="gonull"
              >返回添加</a-button
            >
          </div>
          <div>
            <a-popconfirm
              title="确认删除这个标签"
              ok-text="确认"
              cancel-text="取消"
              @confirm="confirm"
              @cancel="cancel"
            >
              <a href="#">
                <a-button danger v-if="state.flag">删除</a-button>
              </a>
            </a-popconfirm>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="top">所有标签</div>
        <div class="r-main">
          <li
            v-for="(item, index) in state.list"
            :key="index"
            @click="iptvalue(index, item)"
          >
            {{ item.label }}
          </li>
        </div>
      </div>
    </main>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRaw, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import axios from 'axios'
export default defineComponent({
  setup() {
    let state = reactive({
      flag: false,
      list: [
        {
          label: '11',
          value: '11'
        }
      ],
      id: ''
    })
    const formRef = ref()
    const formState = reactive({
      name: '',
      names: ''
    })
    const onSubmit = () => {
      console.log('values', toRaw(formState))
    }
    let iptvalue = (index: any, item: any) => {
      formState.name = state.list[index].label
      formState.names = state.list[index].value
      state.flag = true
      state.id = item.id
    }
    let gonull = () => {
      formState.name = ''
      formState.names = ''
      state.flag = false
    }
    const confirm = (e: MouseEvent) => {
      console.log(e)
      message.warning('访客无权进行该操作')
    }

    const cancel = (e: MouseEvent) => {
      console.log(e)
    }
    onMounted(() => {
      axios.get('https://creationapi.shbwyz.com/api/tag').then((res) => {
        state.list = res.data.data
        console.log(res.data.data)
      })
    })
    return {
      state,
      iptvalue,
      formRef,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      formState,
      onSubmit,
      gonull,
      confirm,
      cancel
    }
  }
})
</script>

<style lang="scss">
.leftchild6 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  header {
    height: 10%;
    padding-left: 10px;
    display: flex;
    align-items: center;
    background: #fff;
    border-top: 1px solid #eae2e2;
    li {
      cursor: pointer;
      color: #999;

      span {
        color: #999;
      }
    }
  }

  main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;

    .top {
      height: 50px;
      border-bottom: 1px solid #eae2e2;
      display: flex;
      align-items: center;
      padding-left: 15px;
    }

    .left {
      width: 37%;
      height: 44%;
      background: #fff;
      margin-top: 2%;

      .l-main {
        .ant-row {
          width: 100%;
          display: flex;
          margin-top: 15px;

          input {
            width: 155%;
            margin-left: 15px;
          }
        }
      }

      .l-footer {
        display: flex;
        justify-content: space-between;

        div {
          margin: 0 15px;
          margin-right: 30px;
        }
      }
    }

    .right {
      width: 57%;
      height: 25%;
      background: #fff;
      margin-left: 20px;
      margin-top: 2%;

      .r-main {
        width: 100%;
        height: 60%;
        display: flex;
        align-items: center;
        li {
          border: solid 1px #ccc;
          cursor: pointer;
          width: 50px;
          height: 25px;
          margin-left: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #999;

          &:hover {
            background: #4299e1;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
